Step 2 of 3: Adding Tiles to the Application

In the previous step you created a WPF application; in this step you'll add Tiles for WPF and Silverlight controls. Complete the following steps:

Place your cursor between the <ListBox.Items></ListBox.Items> tags, navigate to the Toolbox, and double-click the C1Tile control to add it to the page.

Update the C1Tile markup so it looks like the following:

XAML	Copy Code
<c1:C1Tile Content="1" Header="C1Tile" HeaderPadding="12" Padding="0" HeaderBackground="#22000000" HorizontalHeaderAlignment="Stretch" />

This markup adds header and content text, adds padding, changes the color of the header background, and the alignment of the header.

Add the following markup just below the C1Tile markup:

XAML	Copy Code
<c1:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" Header="C1SlideTile"> <c1:C1Tile.ContentTemplate> <DataTemplate> <Border Background="#FFBC1C48" > <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </DataTemplate> </c1:C1Tile.ContentTemplate> <c1:C1Tile.BackContentTemplate> <DataTemplate> <Border Background="#FF028541" > <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock Text="{Binding}" Foreground="White" HorizontalAlignment="Center"/> <TextBlock Text="Back Content Template" Margin="0 -10 0 0" FontSize="12" Foreground="White" HorizontalAlignment="Center"/> </StackPanel> </Border> </DataTemplate> </c1:C1Tile.BackContentTemplate> </c1:C1SlideTile>

XAML

Copy Code

<c1:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" Header="C1SlideTile">
    <c1:C1Tile.ContentTemplate>
        <DataTemplate>
            <Border Background="#FFBC1C48" >
                <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
    </c1:C1Tile.ContentTemplate>
    <c1:C1Tile.BackContentTemplate>
        <DataTemplate>
            <Border Background="#FF028541" >
                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                    <TextBlock Text="{Binding}" Foreground="White" HorizontalAlignment="Center"/>
                    <TextBlock Text="Back Content Template" Margin="0 -10 0 0" FontSize="12" Foreground="White"  HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </c1:C1Tile.BackContentTemplate>
</c1:C1SlideTile>

Note that this markup adds a C1SlideTile control with a ContentTemplate and a BackContentTemplate. The ContentTemplate determines the initial content and appearance of the control. The BackContentTemplate determines the content and appearance of the control once it transitions (in the case of the C1SlideTile control, it slides from one template to the other).

Add the following markup just below the C1SlideTile markup:

XAML	Copy Code
<c1:C1SlideTile Content="3" BackContent="Back Content 3" FontSize="36" Header="C1SlideTile" HeaderPadding="12" Padding="0"/> <c1:C1SlideTile Content="4" Header="C1SlideTile, SlideDirection = Right" HeaderPadding="12" Padding="0" SlideDirection="Right" HorizontalHeaderAlignment="Right"/> <c1:C1SlideTile Content="5" Header="C1SlideTile" />

XAML

Copy Code

<c1:C1SlideTile Content="3" BackContent="Back Content 3" FontSize="36" Header="C1SlideTile" HeaderPadding="12" Padding="0"/>
<c1:C1SlideTile Content="4" Header="C1SlideTile, SlideDirection = Right" HeaderPadding="12" Padding="0" SlideDirection="Right" HorizontalHeaderAlignment="Right"/>
<c1:C1SlideTile Content="5" Header="C1SlideTile" />

This markup adds additional C1SlideTile controls.

In this step you added Tiles for WPF and Silverlight controls to your application. In the next step you'll run the application so see how the application appears at run time.